<template>
   <el-card style="margin:0 0 16px 0"> 
    <el-form :inline="true" :model="formInline" ref="formRef"  label-position="right" class="demo-form-inline flex flex-wrap gap-4">
    <el-form-item label="停电单编号:" prop="workOrderCode" class="form-item" >
      <el-input v-model="formInline.workOrderCode" placeholder="请输入"   />
      </el-form-item>
      <el-form-item label="停电类别:" prop="deleteTag" class="form-item">
        <el-select v-model="formInline.deleteTag" placeholder="请选择规则"  style="width: 170px;" >
          <el-option v-for="item in Typeoption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
    </el-form-item>
    <el-form-item label="业务子类:" prop="deleteTag1" class="form-item">
        <el-select v-model="formInline.deleteTag1" placeholder="请选择规则"  style="width: 170px;" >
          <el-option v-for="item in Typeoption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
    </el-form-item>
    <el-form-item  class="form-item"  >
      <!-- <div class="flex justify-end gap-2"> -->
        <el-button   type="primary" @click="gettableList">查 询</el-button>
        <el-button    @click="reset">重置</el-button>
    <!-- </div> -->
    </el-form-item>
  </el-form>
</el-card>
<el-card>
  <div class="table" >
   <div class="table_heard" style="display: flex;justify-content: space-between;"> <div class="heard_left" style="display: inline-block;">
    <span>停电事件明细</span>
   </div>
    <div class="heard_right" style="display: flex;justify-content: flex-end;">
    <el-button type="primary" @click="onImportExcelClick">导入数据</el-button>
    </div>
</div>
</div>
    <el-table :data="tableData"
              border
              v-loading="dataLoading"
              style="width: 100%;margin-bottom: 20px;margin-top: 20px;height: 70vh">

        <el-table-column prop="powerOutageNo" label="停电编号">
      </el-table-column>
      <el-table-column prop="powerOutageStatus" label="停电状态">
      </el-table-column>
      <el-table-column prop="powerOutageCategory" label="停电类别">
      </el-table-column>
      <el-table-column prop="powerSupplyUnit" label="供电单位">
      </el-table-column>
      <el-table-column prop="plannedStartTime" label="计划停电开始时间">
      </el-table-column>
      <el-table-column prop="plannedEndTime" label="计划停电结束时间">
      </el-table-column>
      <el-table-column prop="actualStartTime" label="停电实际开始时间">
      </el-table-column>
      <!-- <el-table-column prop="deleteTag" label="剔除字段" min-width="160px">
        <template v-slot="scope">
          {{ getChinese(scope.row.deleteTag) }}
        </template>
      </el-table-column>
      <el-table-column prop="workOrderTime" label="工单诉求时间" min-width="100px">
      </el-table-column>
      <el-table-column prop="dailyType"  label="类型" min-width="120px">
        <template v-slot="scope">
          {{ getChineseType(scope.row.dailyType) }}
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="size"
        layout="total, prev, pager, next, jumper"
        :total="total"
    />
  </el-card>
  <el-dialog v-model="UploadExcelDialogShow" title="上传数据" width="20%">
    <el-upload
        class="upload-demo"
        multiple
        method="post"
        :action="uploadAction"
        style="margin-left: 10px"
        accept=".xlsx,.xls"
        :show-file-list="false"
        :on-success="handleSuccess"
        :before-upload="beforeUploadHandle"
        name="files"
    >
      <el-button style="margin-left: 100px;" type="primary" :loading="importLoading">导入</el-button>
    </el-upload>
  </el-dialog>
</template>
<script setup>
import { ref ,computed,reactive} from 'vue'
import utils from "@/utils/utils";
import {getoutageList} from "@/api/work-order";

const workOrderCode = ref('')
const deleteTag = ref('')
const workOrderStatus=ref("")
const UploadExcelDialogShow = ref(false)
const tableData = ref([])
const dataLoading = ref(false)
const total = ref(0)
const page = ref(1)
const size = ref(10)
const importLoading = ref(false) // 开启按钮 loading
const apiBaseUrl=import.meta.env.VITE_API_URL

const uploadAction = computed(() => `${apiBaseUrl}/import/power/outage/importOutage`);
const formInline =reactive({
  workOrderCode:"",
  deleteTag:'',
  deleteTag1:""
  
})
const gettableList = async () => {
  const result = await getoutageList({
    page: page.value,
    size: size.value
  })
  tableData.value = result.list
  total.value = result.total
  dataLoading.value = false
}
gettableList()

const getChineseType = (type) => {
  if (type === '1') {
    return '95598诉求'
  }
  if (type === '2') {
    return '12398诉求'
  }
  if (type === '3') {
    return '管控日报'
  }
  if (type === '4') {
    return '投诉明细'
  }
  if (type === '5') {
    return '时段报数'
  }
  if (type === '6') {
    return '业扩工单情况日通报'
  }
  if (type === '7') {
    return '地市环节工单办理情况日通报'
  }
}

const getChinese = (type) => {
  if (type === '1') {
    return '工单编号'
  }
  if (type === '2') {
    return '用户地址'
  }
  if (type === '3') {
    return '来电内容'
  }
  if (type === '4') {
    return '来电号码'
  }
  if (type === '5') {
    return '诉求人'
  }
  if (type === '6') {
    return '业务类型'
  }
  if (type === '7') {
    return '业务子类'
  }
  if (type === '8') {
    return '诉求时间'
  }
  if (type === '9') {
    return '处理意见'
  }
  if (type === '10') {
    return '市提级意见'
  }
  if (type === '11') {
    return '当前环节'
  }
  if (type === '12') {
    return '处理状态'
  }
  if (type === '13') {
    return '工单回复次数'
  }
  if (type === '14') {
    return '服务渠道'
  }
  if (type === '15') {
    return '信息来源'
  }
  if (type === '16') {
    return '业务标签'
  }
}

const onImportExcelClick = () => {
  UploadExcelDialogShow.value = true
}

const beforeUploadHandle = (file) => {
  importLoading.value = true
  return true
}

const handleSuccess = async (res) => {
  if (res.content === 0||res.content === null) {
    utils.showSuccess('上传数据成功')
  } else {
    utils.showError('有' + res.content + '数据失败')
    utils.showError(res.message)
  }
  UploadExcelDialogShow.value = false
  gettableList()
  importLoading.value = false
}

/**
 * size 改变触发
 */
const handleSizeChange = currentSize => {
  size.value = currentSize
  gettableList()
}

/**
 * 页码改变触发
 */
const handleCurrentChange = currentPage => {
  page.value = currentPage
  gettableList()
}

</script>